<template>
  <div class="dataset-management">
    <div class="page-header">
      <h1>数据集管理</h1>
      <p>管理和维护AI模型训练所需的数据集</p>
    </div>

    <div class="dataset-content">
      <!-- 数据集概览 -->
      <div class="dataset-overview">
        <div class="overview-stats">
          <div class="stat-card">
            <div class="stat-icon">📁</div>
            <div class="stat-info">
              <div class="stat-value">156</div>
              <div class="stat-label">数据集总数</div>
            </div>
          </div>
          <div class="stat-card">
            <div class="stat-icon">💾</div>
            <div class="stat-info">
              <div class="stat-value">2.3TB</div>
              <div class="stat-label">数据总量</div>
            </div>
          </div>
          <div class="stat-card">
            <div class="stat-icon">🏷️</div>
            <div class="stat-info">
              <div class="stat-value">892K</div>
              <div class="stat-label">已标注样本</div>
            </div>
          </div>
          <div class="stat-card">
            <div class="stat-icon">⚡</div>
            <div class="stat-info">
              <div class="stat-value">45</div>
              <div class="stat-label">正在使用</div>
            </div>
          </div>
        </div>

        <div class="quick-actions">
          <button @click="showUploadDialog" class="btn btn-primary">
            📤 上传数据集
          </button>
          <button @click="showCreateDialog" class="btn btn-success">
            ➕ 创建数据集
          </button>
          <button @click="exportDatasets" class="btn btn-secondary">
            💾 导出配置
          </button>
        </div>
      </div>

      <!-- 数据集列表 -->
      <div class="dataset-list">
        <div class="list-header">
          <h3>数据集列表</h3>
          <div class="list-controls">
            <select v-model="filterType" class="filter-select">
              <option value="all">所有类型</option>
              <option value="text">文本数据</option>
              <option value="image">图像数据</option>
              <option value="audio">音频数据</option>
              <option value="video">视频数据</option>
            </select>
            <input v-model="searchQuery" placeholder="搜索数据集..." class="search-input">
          </div>
        </div>

        <div class="dataset-grid">
          <div v-for="dataset in filteredDatasets" :key="dataset.id" class="dataset-card">
            <div class="dataset-header">
              <div class="dataset-info">
                <h4>{{ dataset.name }}</h4>
                <span class="dataset-type">{{ dataset.type }}</span>
              </div>
              <div class="dataset-actions">
                <button @click="editDataset(dataset)" class="action-btn">✏️</button>
                <button @click="deleteDataset(dataset)" class="action-btn">🗑️</button>
              </div>
            </div>
            
            <div class="dataset-stats">
              <div class="stat-item">
                <span class="stat-label">样本数量</span>
                <span class="stat-value">{{ dataset.samples.toLocaleString() }}</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">文件大小</span>
                <span class="stat-value">{{ dataset.size }}</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">标注进度</span>
                <div class="progress-bar">
                  <div class="progress-fill" :style="{ width: dataset.labelProgress + '%' }"></div>
                </div>
                <span class="stat-value">{{ dataset.labelProgress }}%</span>
              </div>
            </div>

            <div class="dataset-meta">
              <div class="meta-item">
                <span class="meta-label">创建时间：</span>
                <span>{{ dataset.createTime }}</span>
              </div>
              <div class="meta-item">
                <span class="meta-label">最后更新：</span>
                <span>{{ dataset.updateTime }}</span>
              </div>
              <div class="meta-item">
                <span class="meta-label">使用状态：</span>
                <span :class="'status-' + dataset.status">{{ getStatusText(dataset.status) }}</span>
              </div>
            </div>

            <div class="dataset-operations">
              <button @click="viewDataset(dataset)" class="btn btn-outline">查看详情</button>
              <button @click="downloadDataset(dataset)" class="btn btn-outline">下载</button>
              <button @click="trainWithDataset(dataset)" class="btn btn-primary">开始训练</button>
            </div>
          </div>
        </div>
      </div>

      <!-- 数据集详情 -->
      <div v-if="selectedDataset" class="dataset-details">
        <h3>数据集详情</h3>
        <div class="details-content">
          <div class="detail-section">
            <h4>基本信息</h4>
            <div class="detail-info">
              <p><strong>名称：</strong>{{ selectedDataset.name }}</p>
              <p><strong>类型：</strong>{{ selectedDataset.type }}</p>
              <p><strong>描述：</strong>{{ selectedDataset.description }}</p>
              <p><strong>版本：</strong>{{ selectedDataset.version }}</p>
            </div>
          </div>

          <div class="detail-section">
            <h4>数据统计</h4>
            <div class="stats-grid">
              <div class="stat-box">
                <div class="stat-number">{{ selectedDataset.samples.toLocaleString() }}</div>
                <div class="stat-desc">总样本数</div>
              </div>
              <div class="stat-box">
                <div class="stat-number">{{ selectedDataset.labelProgress }}%</div>
                <div class="stat-desc">标注完成度</div>
              </div>
              <div class="stat-box">
                <div class="stat-number">{{ selectedDataset.classes }}</div>
                <div class="stat-desc">类别数量</div>
              </div>
              <div class="stat-box">
                <div class="stat-number">{{ selectedDataset.size }}</div>
                <div class="stat-desc">数据大小</div>
              </div>
            </div>
          </div>

          <div class="detail-section">
            <h4>文件列表</h4>
            <div class="file-list">
              <div v-for="file in selectedDataset.files" :key="file.name" class="file-item">
                <span class="file-name">{{ file.name }}</span>
                <span class="file-size">{{ file.size }}</span>
                <span class="file-type">{{ file.type }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DatasetManagement',
  data() {
    return {
      filterType: 'all',
      searchQuery: '',
      selectedDataset: null,
      datasets: [
        {
          id: 1,
          name: '文本谣言检测数据集',
          type: 'text',
          samples: 50000,
          size: '2.3GB',
          labelProgress: 95,
          createTime: '2024-01-10',
          updateTime: '2024-01-15',
          status: 'active',
          description: '用于训练文本谣言检测模型的数据集',
          version: 'v2.1',
          classes: 5,
          files: [
            { name: 'train.txt', size: '1.2GB', type: 'text' },
            { name: 'test.txt', size: '600MB', type: 'text' },
            { name: 'validation.txt', size: '500MB', type: 'text' }
          ]
        },
        {
          id: 2,
          name: '图像篡改检测数据集',
          type: 'image',
          samples: 25000,
          size: '15.6GB',
          labelProgress: 87,
          createTime: '2024-01-08',
          updateTime: '2024-01-14',
          status: 'training',
          description: '用于检测图像篡改和伪造的数据集',
          version: 'v1.8',
          classes: 3,
          files: [
            { name: 'images.zip', size: '14.2GB', type: 'image' },
            { name: 'labels.json', size: '1.4GB', type: 'json' }
          ]
        },
        {
          id: 3,
          name: '音频深度伪造检测',
          type: 'audio',
          samples: 15000,
          size: '8.9GB',
          labelProgress: 72,
          createTime: '2024-01-05',
          updateTime: '2024-01-12',
          status: 'processing',
          description: '用于检测音频深度伪造的数据集',
          version: 'v1.3',
          classes: 2,
          files: [
            { name: 'audio_samples.zip', size: '8.0GB', type: 'audio' },
            { name: 'metadata.csv', size: '900MB', type: 'csv' }
          ]
        }
      ]
    }
  },
  computed: {
    filteredDatasets() {
      let filtered = this.datasets

      if (this.filterType !== 'all') {
        filtered = filtered.filter(dataset => dataset.type === this.filterType)
      }

      if (this.searchQuery) {
        filtered = filtered.filter(dataset => 
          dataset.name.toLowerCase().includes(this.searchQuery.toLowerCase())
        )
      }

      return filtered
    }
  },
  methods: {
    getStatusText(status) {
      const statusMap = {
        active: '活跃',
        training: '训练中',
        processing: '处理中',
        inactive: '未激活'
      }
      return statusMap[status] || status
    },
    showUploadDialog() {
      alert('上传数据集功能')
    },
    showCreateDialog() {
      alert('创建数据集功能')
    },
    exportDatasets() {
      alert('导出数据集配置')
    },
    editDataset(dataset) {
      alert(`编辑数据集: ${dataset.name}`)
    },
    deleteDataset(dataset) {
      if (confirm(`确定删除数据集 "${dataset.name}" 吗？`)) {
        this.datasets = this.datasets.filter(d => d.id !== dataset.id)
      }
    },
    viewDataset(dataset) {
      this.selectedDataset = dataset
    },
    downloadDataset(dataset) {
      alert(`下载数据集: ${dataset.name}`)
    },
    trainWithDataset(dataset) {
      alert(`使用数据集开始训练: ${dataset.name}`)
    }
  }
}
</script>

<style scoped>
.dataset-management {
  padding: 20px;
}

.page-header {
  margin-bottom: 30px;
}

.page-header h1 {
  font-size: 28px;
  color: #2c3e50;
  margin: 0 0 10px 0;
}

.page-header p {
  color: #7f8c8d;
  margin: 0;
}

.dataset-content {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.dataset-overview {
  background: white;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.overview-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 25px;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}

.stat-icon {
  font-size: 24px;
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #2c3e50;
  margin-bottom: 5px;
}

.stat-label {
  color: #7f8c8d;
  font-size: 14px;
}

.quick-actions {
  display: flex;
  gap: 15px;
}

.btn {
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
}

.btn-primary {
  background: #3498db;
  color: white;
}

.btn-success {
  background: #27ae60;
  color: white;
}

.btn-secondary {
  background: #95a5a6;
  color: white;
}

.btn-outline {
  background: transparent;
  border: 1px solid #3498db;
  color: #3498db;
}

.dataset-list {
  background: white;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}

.list-header h3 {
  margin: 0;
  color: #2c3e50;
}

.list-controls {
  display: flex;
  gap: 15px;
}

.filter-select,
.search-input {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
}

.dataset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 20px;
}

.dataset-card {
  border: 1px solid #e1e5e9;
  border-radius: 8px;
  padding: 20px;
  background: #f8f9fa;
}

.dataset-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 15px;
}

.dataset-info h4 {
  margin: 0 0 5px 0;
  color: #2c3e50;
}

.dataset-type {
  padding: 2px 8px;
  background: #3498db;
  color: white;
  border-radius: 4px;
  font-size: 12px;
  text-transform: uppercase;
}

.dataset-actions {
  display: flex;
  gap: 5px;
}

.action-btn {
  padding: 5px 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 4px;
  font-size: 16px;
}

.action-btn:hover {
  background: #e9ecef;
}

.dataset-stats {
  margin-bottom: 15px;
}

.stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.stat-label {
  color: #7f8c8d;
  font-size: 14px;
}

.stat-value {
  font-weight: 500;
  color: #2c3e50;
}

.progress-bar {
  flex: 1;
  height: 8px;
  background: #e9ecef;
  border-radius: 4px;
  margin: 0 10px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: #28a745;
  transition: width 0.3s ease;
}

.dataset-meta {
  margin-bottom: 15px;
  padding-top: 15px;
  border-top: 1px solid #e9ecef;
}

.meta-item {
  display: flex;
  margin-bottom: 5px;
  font-size: 14px;
}

.meta-label {
  color: #7f8c8d;
  min-width: 80px;
}

.status-active {
  color: #28a745;
}

.status-training {
  color: #ffc107;
}

.status-processing {
  color: #17a2b8;
}

.status-inactive {
  color: #6c757d;
}

.dataset-operations {
  display: flex;
  gap: 10px;
}

.dataset-details {
  background: white;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.dataset-details h3 {
  margin: 0 0 20px 0;
  color: #2c3e50;
}

.details-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.detail-section {
  margin-bottom: 25px;
}

.detail-section h4 {
  margin: 0 0 15px 0;
  color: #2c3e50;
  padding-bottom: 10px;
  border-bottom: 2px solid #3498db;
}

.detail-info p {
  margin: 8px 0;
  color: #7f8c8d;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.stat-box {
  text-align: center;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}

.stat-number {
  font-size: 24px;
  font-weight: bold;
  color: #3498db;
  margin-bottom: 5px;
}

.stat-desc {
  color: #7f8c8d;
  font-size: 14px;
}

.file-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.file-item {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 15px;
  padding: 10px;
  background: #f8f9fa;
  border-radius: 6px;
  align-items: center;
}

.file-name {
  font-weight: 500;
  color: #2c3e50;
}

.file-size {
  color: #7f8c8d;
  font-size: 14px;
}

.file-type {
  color: #3498db;
  font-size: 12px;
  text-transform: uppercase;
}

@media (max-width: 768px) {
  .dataset-grid {
    grid-template-columns: 1fr;
  }
  
  .details-content {
    grid-template-columns: 1fr;
  }
  
  .overview-stats {
    grid-template-columns: 1fr;
  }
  
  .quick-actions {
    flex-direction: column;
  }
  
  .list-controls {
    flex-direction: column;
  }
}
</style> 